<template>
    <div class="courseContentView">
        <div class="navigation">
            <SideNav ref="sideNav" :width="350" :menuList="navigationMenuList" :foldButton="false">
                <template #title>
                    <div class="sideNavTitle">
                        <span class="titleText">{{ course.courseName }}</span>
                        <span class="iconfont icon-likesprogramdaohangshouqi_moren" @click="sideNav.fold(true)"></span>
                    </div>
                </template>
                <template #notice>
                    <div class="sideNavList">
                        <ChatList :chatList="messageChatList" />
                    </div>
                </template>
                <template #chapter>
                    <div class="sideNavList">
                        <div class="list">
                            <MenuList :menuList="chapterLists" :fontSize="14" @itemClick="handleChapterClick" />
                        </div>
                    </div>
                </template>
                <template #exercise>
                    <div class="sideNavList">
                        <div class="option">
                            <div class="optionItem">
                                <label>
                                    <input type="radio" :value="0" name="loginType" v-model="homeworkFilter" />
                                    <span>全部</span>
                                </label>
                            </div>
                            <div class="optionItem">
                                <label>
                                    <input type="radio" :value="2" name="loginType" v-model="homeworkFilter" />
                                    <span>已完成</span>
                                </label>
                            </div>
                            <div class="optionItem">
                                <label>
                                    <input type="radio" :value="1" name="loginType" v-model="homeworkFilter" />
                                    <span>未完成</span>
                                </label>
                            </div>
                        </div>
                        <div class="list">
                            <HomeworkList v-model="homeworkList" :filter="homeworkFilter"
                            :selectHomeworkId="selectHomeworkId" @itemClick="homeworkItemClick" />
                        </div>
                    </div>
                </template>
                <template #resources>
                    <div class="sideNavList">
                        <div class="option" v-if="permission > 1">
                            <div class="optionItem">
                                <div class="button" @click="showMessage">
                                    <span>上传资源</span>
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <ResourcesList v-model="resourcesList" :joinCourse="null" :permission="1" /> 
                        </div>
                    </div>
                </template>
                <template #students>
                    <div class="sideNavList">
                        <div class="list">
                            <MenuList :menuList="studentLists" :fontSize="14" @itemClick="handleStudentClick" />
                        </div>
                    </div>
                </template>
                <template #questionBank>
                    <div class="sideNavList">
                        <div class="list">
                            <MenuList :menuList="exercisesLists" :fontSize="14" @itemClick="handleKnowledgeClick" />
                        </div>
                    </div>
                </template>
            </SideNav>
        </div>
        <div class="content">
            <router-view />
        </div>

        <!-- 上传资源对话框 -->
        <MessageDialog ref="messageDialog" @closeEvent="closeEvent">
            <template v-slot:title>
                <span>上传资源</span>
            </template>
            <template v-slot:content>
                <div class="dialogContent">
                    <form>
                        <div class="inputBox">
                            <span>资料名称：</span>
                            <input type="text" v-model="uploadResourceName" placeholder="请输入课程名称" />
                        </div>
                        <div class="inputBox">
                            <span>文件列表：</span>
                            <div class="button" :class="{ 'butNormal': (!uploadFile || !uploadFinish), 'disable': (uploadFile || uploadFinish) }" @click="openFlies">
                                <span class="iconfont icon-likesprogrambianji"></span>
                                选择文件
                            </div>
                        </div>
                        <div class="inputBox" v-if="uploadFlieList.length > 0">
                            <draggable class="draggableDataList" v-model="uploadFlieList" item-key="draggableData.displayOrder" handle=".draggableData-handle" 
                            @start="draggableFilesStart" @end="draggableFilesEnd">
                                <template #item="{ element: uploadFile, index: fIdx }">
                                    <div class="draggableData" :class="{ 'dragging': activeUploadFileIdx === fIdx }">
                                        <div class="progress" v-if="uploadFile?.progress > 0" :style="{width: 'calc(' + uploadFile.progress + '% - 20px)'}"></div>
                                        <div class="draggableDataInfo">
                                            <span class="draggableData-handle infoMove" style="cursor: move;">☰</span>
                                            <div class="infoNum">{{ uploadFile?.displayOrder }}</div>
                                            <div class="infoIcon">
                                                <img :src="FileProcessing.getFileIcon(uploadFile.file)" alt="">
                                            </div>
                                            <div class="infoName">
                                                <span>{{ uploadFile.file.name }}</span>
                                            </div>
                                            <div class="infoSize">{{ FileProcessing.getFileSize(uploadFile.file) }}</div>
                                            <div class="infoType" :class="{  'fail': uploadFile.status == -1, 'warning': uploadFile.status == 0, 'success': (uploadFile.status == 1 || uploadFile.status == 2) }">
                                                <!-- <span>{{ uploadFile.file.type }}</span> -->
                                                {{ uploadFile.status == -1 ? '上传失败' : uploadFile.status == 0 ? '等待上传' : uploadFile.status == 1 ? '正在上传' : uploadFile.status == 2 ? '上传完成' : '未知状态' }}
                                            </div>
                                            <div class="button butDelete" @click="removeFile(uploadFile?.displayOrder - 1)" v-if="uploadFile.status == -1 || uploadFile.status == 0">
                                                <span class="iconfont icon-likesprogramcuowu"></span>
                                                移除
                                            </div>
                                            <div class="infoType" :class="{  'fail': uploadFile.status == -1, 'warning': uploadFile.status == 0, 'success': (uploadFile.status == 1 || uploadFile.status == 2) }" v-else>
                                                <!-- <span>{{ uploadFile.file.type }}</span> -->
                                                {{ uploadFile.progress.toFixed(2) + '%' }}
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </draggable>
                        </div>
                    </form>
                </div>
            </template>
            <template v-slot:footer>
                <div class="dialogFooterButton" @click="closeMessage">
                    <span class="line">取消</span>
                </div>
                <div class="dialogFooterButton" @click="uploadFiles">
                    <span>确认</span>
                </div>
            </template>
        </MessageDialog>
    </div>
</template>

<script lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import SideNav, { SideNavMenu } from '@/components/SideNav.vue';
import MenuList from '@/components/MenuList.vue';
import ChatList, { Chat } from '@/components/message/ChatList.vue';
import ResourcesList from '@/components/course/ResourcesList.vue';
import { MenuListItem } from '@/types/MenuListItem';
import { userAvatar } from '@/types/Base64Image';
import { courseApi, homeworkApi, resourceApi } from '@/api/course/Course';
import HomeworkList from '@/components/course/HomeworkList.vue';
// import { Chapter, Exercises } from '@/types/Course';
// import { userApi } from '@/api/Users';
import { CourseResource, PublishHomework } from '@/types/Course';
import { FileProcessing } from '@/util/file_processing';
import draggable from 'vuedraggable';
import { userAvatar as defaultAvatar } from '@/types/Base64Image';
import { baseUrl } from '@/util/request';

export default {
    name: 'courseContentView'
}

</script>

<script setup lang="ts">
    const router = useRouter();     // 获取路由实例
    const route = useRoute();
    const courseId = ref<number>();
    
    // 权限
    const permission = ref<number>(0);

    const chapterSelect = ref<{
        chapterId: number,
        lessonId: number
    }>({chapterId: 0, lessonId: 0});
    const knowledgeSelect = ref<{
        chapterId: number,
        recordId: number
    }>({chapterId: 0, recordId: 0});
    // 导航组件
    const sideNav = ref(null);
    const navigationMenuList = ref<SideNavMenu[]>([]);
    // 老师端导航
    const teacherNavigationMenuList = ref<SideNavMenu[]>([
        { iconName: 'icon-likesprograma-shangyibu1', titleText: '返回', onClick: () => { router.push(`/course/courseDetails/${courseId.value}`); } },
        // { iconName: 'icon-likesprogramtongzhi', titleText: '通知', slotName: 'notice', onClick: () => { router.push(`/course/courseContent/${courseId.value}`); } },
        { iconName: 'icon-likesprogramzujian', titleText: '章节', slotName: 'chapter', onClick: () => {
            if (chapterSelect.value.chapterId && chapterSelect.value.lessonId) {
                router.push({
                    path: `/course/courseContent/${courseId.value}/courseContentChapter`,
                    query: { chapterId: chapterSelect.value.chapterId, lessonId: chapterSelect.value.lessonId }
                });
            } else {
                router.push(`/course/courseContent/${courseId.value}/courseContentChapter`); 
            }
        } },
        { iconName: 'icon-likesprogramedit', titleText: '习题', slotName: 'exercise', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseContentExercise`); } },
        { iconName: 'icon-likesprogramzhishiku', titleText: '资料', slotName: 'resources', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseContentResources`); } },
        { iconName: 'icon-likesprogramjiaoyu', titleText: '学生', slotName: 'students', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseContentStudent`); } },
        { iconName: 'icon-likesprogramku', titleText: '题库', slotName: 'questionBank', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseQuestionBank`); } }
    ]);
    // 学生端导航
    const studentNavigationMenuList = ref<SideNavMenu[]>([
        { iconName: 'icon-likesprograma-shangyibu1', titleText: '返回', onClick: () => { router.push(`/course/courseDetails/${courseId.value}`); } },
        // { iconName: 'icon-likesprogramtongzhi', titleText: '通知', slotName: 'notice', onClick: () => { router.push(`/course/courseContent/${courseId.value}`); } },
        { iconName: 'icon-likesprogramzujian', titleText: '章节', slotName: 'chapter', onClick: () => {
            if (chapterSelect.value.chapterId && chapterSelect.value.lessonId) {
                router.push({
                    path: `/course/courseContent/${courseId.value}/courseContentChapter`,
                    query: { chapterId: chapterSelect.value.chapterId, lessonId: chapterSelect.value.lessonId }
                });
            } else {
                router.push(`/course/courseContent/${courseId.value}/courseContentChapter`); 
            }
        } },
        { iconName: 'icon-likesprogramedit', titleText: '习题', slotName: 'exercise', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseContentExercise`); } },
        { iconName: 'icon-likesprogramzhishiku', titleText: '资料', slotName: 'resources', onClick: () => { router.push(`/course/courseContent/${courseId.value}/courseContentResources`); } }
    ]);

    const hasChapterEditingPermission = ref(true); // 是否有章节编辑权限
    // const hasQuestionEditingPermission = ref(true); // 是否有章节题库权限

    // 课程信息
    const course = ref({
        courseName: '', // 课程名称
    });
    
    // 消息对话框
    const messageDialog = ref(null);
    const showMessage = () => {
        if (uploadResourceName.value?.length <= 0) uploadResourceName.value = '新建资源';
        messageDialog.value.ShowModal();
        
    }
    const closeMessage = () => {
        if  (uploadFinish.value)
        {
            alert('资源上传完成！');
            uploadFlieList.value = [];
            uploadFile.value = false;
            uploadFinish.value = false;
        }
        messageDialog.value.Close();
    }
    const closeEvent = () => {
        if (uploadFile.value && !uploadFinish.value) alert('文件正在后台上传，请勿刷新页面。');
        else
        {
            uploadFlieList.value = [];
            uploadFile.value = false;
            uploadFinish.value = false;
        }
    }

    // 文件上传
    const uploadFile = ref(false); // 正在上传
    const uploadFinish = ref(false); // 上传完成
    const uploadResourceName  = ref('');
    const uploadFlieList = ref<{file: File, status: number, displayOrder: number, progress?: number}[]>([]);
    const activeUploadFileIdx = ref(null);
    const draggableFilesStart = (e: any) => {
        setTimeout(() => {
            activeUploadFileIdx.value = e.oldIndex;
        }, 0);
    }
    const draggableFilesEnd = () => {
        activeUploadFileIdx.value = null;
        updateOrder();
    }
    // 更新顺序
    function updateOrder() {
        uploadFlieList.value.forEach((uploadFile, cIdx) => {
            uploadFile.displayOrder = cIdx + 1;
        });
    }
    // 打开文件
    const openFlies = () => {
        if (uploadFile.value || uploadFinish.value) return;
        FileProcessing.openFiles('/*', false)
        .then(async (file) => {
            uploadFlieList.value.push({file: file as File, status: 0, progress: 0, displayOrder: uploadFlieList.value.length + 1});
        });
    }
    // 移除文件
    const removeFile = (idx: number) => {
        uploadFlieList.value.splice(idx, 1);
        updateOrder();
    }
    // 文件上传
    const uploadFiles = async () => {
        if (uploadFile.value || uploadFinish.value)
        {
            closeMessage();
            return;
        }
        uploadFile.value = true;
        if (uploadResourceName.value?.length <= 0) return;
        // 创建资源
        const _resourceId = await resourceApi.createResource({
            resourceName: uploadResourceName.value,
            courseId: courseId.value,
            resourceId: 0
        });
        // 上传文件
        for(const uploadFile of uploadFlieList.value)
        {
            let startUpload = false;
            uploadFile.status = 1;
            resourceApi.files.upload(
                uploadFile.file,
                _resourceId,
                async (progress) => {
                    uploadFile.progress = progress;
                    if (uploadFile.progress === 100) startUpload = true;
                }
            ).catch(() => {
                uploadFile.status = -1;
            });
            
            // 获取进度
            uploadFile.progress = 0;
            while (true) {
                // 等待上传开始
                if (!startUpload)
                {
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    continue
                }
                if (uploadFile.status === -1) {
                    break;
                }
                uploadFile.progress = await resourceApi.files.getProgress("upload_course_resource_" + _resourceId).catch(() => -1);
                if (uploadFile.progress === -1) {
                    console.warn("进度获取失败，但不代表上传失败，继续重试");
                    uploadFile.status = -1;
                    break;
                }
                if (uploadFile.progress === 100) {
                    uploadFile.status = 2;
                    break;
                }
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
        }
        setTimeout(() => {
            uploadFile.value = false;
            uploadFinish.value = true;
            closeMessage();
            resourceApi.getResourceList(courseId.value).then(async data => {
                resourcesList.value = data;
            });
        }, 1000);
    }

    // 章节列表
    const chapterLists = ref<MenuListItem[]>([]);

    // 题库列表
    const exercisesLists = ref<MenuListItem[]>([]);

    // 习题列表
    const homeworkFilter = ref(0); // 0:全部，1：未提交，2：已提交
    const selectHomeworkId = ref(0);
    const homeworkList = ref<PublishHomework[]>([]);

    // 获取课程章节及对应课时列表
    const fetchChapterListWithLessons = async (): Promise<MenuListItem[]> => {
        try {
            // 获取章节列表
            const chaptersResponse = await courseApi.chapter.getList(courseId.value);

            // 为每个章节并行获取课时列表
            const chapterPromises = chaptersResponse.data.map(async (chapter) => {
                try {
                    const lessonsResponse = await courseApi.chapter.lessons.getList(chapter.chapterId);

                    return {
                        menuId: `${chapter.chapterId}`,
                        chapterId: chapter.chapterId,
                        selected: chapterSelect.value.chapterId === chapter.chapterId,
                        name: `第${chapter.displayOrder}章 ${chapter.chapterName}`,
                        icon: '&#xe65c;',
                        children: lessonsResponse.data.map(lesson => ({
                            menuId: `${chapter.chapterId}.${lesson.lessonsId}`,
                            chapterId: chapter.chapterId,
                            lessonId: lesson.lessonsId,
                            selected: chapterSelect.value.lessonId === lesson.lessonsId,
                            name: `${chapter.displayOrder}.${lesson.displayOrder} ${lesson.lessonName}`,
                            icon: '&#xe645;'
                        }))
                    } as MenuListItem;
                } catch (error) {
                    console.error(`获取章节 ${chapter.chapterId} 的课时列表失败:`, error);
                    return {
                        menuId: `${chapter.chapterId}`,
                        chapterId: chapter.chapterId,
                        selected: chapterSelect.value.chapterId === chapter.chapterId,
                        name: `第${chapter.displayOrder}章 ${chapter.chapterName}`,
                        icon: '&#xe65c;',
                        contract: true,
                        children: []
                    } as MenuListItem;
                }
            });

            // 等待所有章节数据完成
            return await Promise.all(chapterPromises);

        } catch (error) {
            console.error('获取课程章节列表失败:', error);
            return [];
        }
    };

    // 获取知识点列表
    const fetchKnowledgeList = async (): Promise<MenuListItem[]> => {
        try {
            // 获取章节列表
            const chaptersResponse = await courseApi.chapter.getList(courseId.value);

            // 为每个章节并行获取课时列表
            const chapterPromises = chaptersResponse.data.map(async (chapter) => {
                try {
                    const knowledgeResponse = await courseApi.chapter.knowledge.getKnowledgePoint(courseId.value, chapter.chapterId);
                
                    return {
                        menuId: `${chapter.chapterId}`,
                        chapterId: chapter.chapterId,
                        selected: knowledgeSelect.value.chapterId === chapter.chapterId,
                        name: `第${chapter.displayOrder}章 ${chapter.chapterName}`,
                        icon: '&#xe65c;',
                        children: knowledgeResponse.data.map(knowledges => ({
                            menuId: `${chapter.chapterId}.${knowledges.recordId}`,
                            chapterId: chapter.chapterId,
                            recordId: knowledges.recordId,
                            selected: knowledgeSelect.value.recordId === knowledges.recordId,
                            name: `知识点： ${knowledges.knowledgeContent}`,
                            icon: '&#xe6a7;'
                        }))
                    } as MenuListItem;
                } catch (error) {
                    console.error(`获取章节 ${chapter.chapterId} 的课时列表失败:`, error);
                    return {
                        menuId: `${chapter.chapterId}`,
                        chapterId: chapter.chapterId,
                        selected: knowledgeSelect.value.chapterId === chapter.chapterId,
                        name: `第${chapter.displayOrder}章 ${chapter.chapterName}`,
                        icon: '&#xe65c;',
                        contract: true,
                        children: []
                    } as MenuListItem;
                }
            });

            // 等待所有章节数据完成
            return await Promise.all(chapterPromises);

        } catch (error) {
            console.error('获取课程章节列表失败:', error);
            return [];
        }
    }
    // 获取已发布的作业列表
    const fetchHomeworkList = async () => {
        return await homeworkApi.publish.getHomeworkList(courseId.value);
    };

    // 获取成员列表
    const fetchMemberList = async (): Promise<MenuListItem[]> => {
        const res = await courseApi.courseClass.getClassList(courseId.value);
        return res.map(item => ({
            menuId: `${item.groupId}`,
            groupId: item.groupId,
            selected: knowledgeSelect.value.chapterId === item.groupId,
            name: `${item.groupName}`,
            icon: '&#xe65c;',
            children: item.userRegistCus.map(userRegistCus => ({
                menuId: `${item.groupId}.${userRegistCus.userId}`,
                groupId: item.groupId,
                userId: userRegistCus.userId,
                selected: knowledgeSelect.value.recordId === userRegistCus.userId,
                name: `${userRegistCus.userNickName}`,
                icon: userRegistCus?.userInfo?.avatarPath ? `${baseUrl}${userRegistCus.userInfo.avatarPath}` : defaultAvatar(),
                isAvatar: true,
                avatarRight: false,  // 头像显示在左边
            }))
        } as MenuListItem))
    };

    const updateCourseId = async () => {
        console.log(courseId.value);
        // 获取课程信息
        courseApi.findCourse({courseId: courseId.value}).then(res => {
            console.log(res);
            course.value.courseName = res.data.list[0].courseName;
        });

        // 获取课程章节列表
        fetchChapterListWithLessons().then(data => {
            chapterLists.value = data;
        });

        // 获取课程题库列表
        fetchKnowledgeList().then(data => {
            exercisesLists.value = data;
            console.log(data);
        });

        // 获取已发布的作业列表
        fetchHomeworkList().then(data => {
            homeworkList.value = data;
        });

        // 获取学生列表
        fetchMemberList().then(data =>{
            studentLists.value = data;
        });
    };

    // 选择作业
    const homeworkItemClick = (homework: PublishHomework) => {
        if (homework.publishId === selectHomeworkId.value) {
            selectHomeworkId.value = -1;
            router.push({ path: `/course/courseContent/${courseId.value}/courseContentExercise` });
        } else 
        {
            router.push({
                path: `/course/courseContent/${courseId.value}/courseContentExercise`,
                query: { homeworkId: homework.publishId }
            });
        }
    }

    // 参数转换函数（确保字符串转换为数字）
    const parseSafeInt = (value: string | string[] | undefined): number | undefined => {
        if (typeof value === 'string') {
            const num = parseInt(value, 10);
            return isNaN(num) ? undefined : num;
        }
        return undefined;
    };

    // 监听路由参数的变化
    watch(
        () => ({
            courseIdParam: route.params.courseId,
            chapterIdParam: route.query.chapterId,
            lessonIdParam: route.query.lessonId,
            knowledgeIdParam: route.query.knowledgeId,
            selectHomeworkIdParam: route.query.homeworkId,
        }),
        async ({ courseIdParam, chapterIdParam, lessonIdParam, knowledgeIdParam, selectHomeworkIdParam }) => {
            const index = route.meta.navIndex; // 从路由 meta 获取索引
            if (index !== undefined && sideNav.value) {
              sideNav.value.selected(index); // 设置初始 导航 选中项
            }

            if (selectHomeworkIdParam !== undefined)
                selectHomeworkId.value = parseSafeInt(selectHomeworkIdParam);

            // 转换并更新 courseId
            if (courseIdParam)
            {
                const newCourseId = parseSafeInt(courseIdParam);
                if (newCourseId !== undefined && courseId.value !== newCourseId)
                {
                    courseId.value = newCourseId;
                    navigationMenuList.value = studentNavigationMenuList.value;
                    permission.value = (await courseApi.getMemberPermission(courseId.value));
                    // 处理权限导航
                    if (permission.value > 1) navigationMenuList.value = teacherNavigationMenuList.value;
                    else navigationMenuList.value = studentNavigationMenuList.value;
                }
            }

            // 转换并更新 chapterId
            chapterSelect.value.chapterId = parseSafeInt(chapterIdParam);
            knowledgeSelect.value.chapterId = parseSafeInt(chapterIdParam);
            // 转换并更新 lessonId
            chapterSelect.value.lessonId = parseSafeInt(lessonIdParam);
            knowledgeSelect.value.recordId = parseSafeInt(knowledgeIdParam);

            // 更新页面内容
            updateCourseId();

            resourceApi.getResourceList(courseId.value).then(async data => {
                resourcesList.value = data;
            });
        },
        { immediate: true }
    );

    // 初始化导航选中项
    onMounted(() => {
        const index = route.meta.navIndex; // 从路由 meta 获取索引
        if (index !== undefined && sideNav.value) {
          sideNav.value.selected(index); // 设置初始 导航 选中项
        }
    });

    // chat 列表
    const messageChatList = ref<Chat[]>([
        {
            title: "网站开发05班",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 1,
            sessionId: "1"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 2,
            sessionId: "2"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 20,
            sessionId: "3"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 200,
            sessionId: "4"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 200,
            sessionId: "5"
        },
        {
            title: "网站开发05班",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 1,
            sessionId: "6"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 2,
            sessionId: "7"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 20,
            sessionId: "8"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 200,
            sessionId: "14"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 2,
            sessionId: "9"
        },
        {
            title: "网站开发推荐课程",
            avatar: userAvatar(),
            content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
            time: 0,
            newMessageSize: 20,
            sessionId: "30"
        }
    ]);

    // 资源列表
    const resourcesList = ref<CourseResource[]>([]);

    // 学生列表
    const studentLists = ref<MenuListItem[]>([]);

    // 处理课程章节点击事件
    const handleChapterClick = (menu: any) => {
        console.log(menu);
        if (menu.chapterId && menu.lessonId) {
            if (menu.chapterId == chapterSelect.value.chapterId && menu.lessonId == chapterSelect.value.lessonId && hasChapterEditingPermission.value) {
                router.push(`/course/courseContent/${courseId.value}/courseContentChapter`);
            }
            else {
                router.push({
                    path: `/course/courseContent/${courseId.value}/courseContentChapter`,
                    query: { chapterId: menu.chapterId, lessonId: menu.lessonId }
                });
            }
        }
    };

    // 处理学生点击事件
    const handleStudentClick = (menu: any) => {
        if (menu.menuId && !menu.children) {
            router.push({
                path: `/course/courseContent/${courseId.value}/courseContentStudent`,
                query: { UserId: menu.userId }
            });
        }
    };

    // 处理课程知识点击事件
    const handleKnowledgeClick = (menu: any) => {
        console.log(menu);
        if (menu.chapterId && menu.recordId) {
            if (menu.chapterId == knowledgeSelect.value.chapterId && menu.recordId == knowledgeSelect.value.recordId) {
                router.push(`/course/courseContent/${courseId.value}/courseQuestionBank`);
            }
            else {
                router.push({
                    path: `/course/courseContent/${courseId.value}/courseQuestionBank`,
                    query: { chapterId: menu.chapterId, knowledgeId: menu.recordId }
                });
            }
        }
    };

</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.courseContentView {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 左侧 */
.courseContentView .navigation {
    height: 100%;
    flex-shrink: 0;
}

/* 左侧导航标题 */
.courseContentView .navigation .sideNavTitle {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
    padding-right: 5px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}
.courseContentView .navigation .sideNavTitle .titleText {
    flex: 1;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 收起按钮 */
.courseContentView .navigation .sideNavTitle .iconfont {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    flex-shrink: 0;
    font-size: 24px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
}
.courseContentView .navigation .sideNavTitle .iconfont:hover {
    background-color: rgba(200, 200, 255, .2);
    color: rgba(65, 185, 255, 1);
}
.courseContentView .navigation .sideNavTitle .iconfont:active {
    background-color: rgba(200, 200, 255, .3);
    transition: all .1s;
}

/* 列表内容 */
.sideNavList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}
/* 列表选项 */
.sideNavList .option {
    width: 100%;
    flex-shrink: 0;
    padding: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.sideNavList .option.optionTitle {
    padding-top: 0px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}
.sideNavList .option .optionItem {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 按钮 */
.sideNavList .option .optionItem .button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: all .3s;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
}
.sideNavList .option .optionItem .button:hover {
    background-color: rgba(65, 185, 255, .8);
}
.sideNavList .option .optionItem .button:active {
    background-color: rgba(65, 185, 255, .9);
    transition: all .1s;
}
/* 单选框 */
.sideNavList .option .optionItem label {
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sideNavList .option .optionItem label input {
    width: 10px;
    height: 10px;
}
.sideNavList .option .optionItem label input:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 8px;
  font-weight: bold;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  outline: 2px solid rgba(180, 180, 180, 1);
}
.sideNavList .option .optionItem label input:checked:before {
  content: "\2713";
  color: rgba(65, 185, 255, 1);
  outline: 2px solid rgba(65, 185, 255, 1);
}
.sideNavList .option .optionItem label span {
    padding-left: 6px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 列表 */
.sideNavList .list {
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

/* 右侧内容 */
.courseContentView .content {
    flex: 1;
    min-width: 0px;
    height: 100%;
}

.courseContentView .content .home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 编辑课程对话框 */
.dialogContent form {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.dialogContent form .inputBox {
    width: 550px;
    padding: 10px 0px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dialogContent form .inputBox.noPadding {
    padding: 10px 0px;
    align-items: flex-start;
}

/* 输入框 */
.dialogContent form .inputBox span {
    min-width: 80px;
}
.dialogContent form .inputBox input, .dialogContent form .inputBox textarea {
    width: 100%;
    height: 35px;
    font-size: 16px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
}
.dialogContent form .inputBox.noPadding textarea {
    height: 100px;
    resize: none; /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}
.dialogContent form .inputBox input:focus, .dialogContent form .inputBox textarea:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}

.dialogContent form .inputBox input, .dialogContent form .inputBox .typeBox {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.dialogContent form .inputBox input {
    height: 35px;
    border: 2px solid rgba(200, 200, 200, 1);
}
.dialogContent form .inputBox .typeBox {
    min-height: 40px;
    max-height: 80px;
    resize: none; /* 禁止调整大小 */
    padding: 3px 10px;
    line-height: 28px;
}
.dialogContent form .inputBox .typeBox.maxType {
    max-height: 250px;
}
.dialogContent form .inputBox .typeBox.slectList {
    max-height: 150px;
}
.dialogContent form .inputBox input:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .listBox {
    border: 2px solid rgba(200, 200, 200, 1);
}

/* 列表 */
.dialogContent form .inputBox .typeBox .typeItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    font-size: 14px;
    border-radius: 10px;
    border: 2px solid rgba(200, 200, 200, 1);
}
.dialogContent form .inputBox .typeBox.slectList .typeItem {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .typeBox .typeItem:hover {
    color: rgba(65, 185, 255, 1);
    border: 2px solid rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .typeBox .typeItem.select {
    color: rgb(255, 255, 255);
    border: 2px solid rgba(65, 185, 255, 1);
    background: rgba(65, 185, 255, 1);
}

/* 表单按钮 */
.dialogContent form .inputBox .button {
    min-width: 100px;
    height: 35px;
    overflow: hidden;
    padding: 0px 5px;
    border-radius: 5px;
    margin-left: 10px;
    transition: .3s all;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .button .iconfont {
    font-size: 18px;
    margin-right: 5px;
    min-width: 0px;
}
/* 正常按钮 */
.dialogContent form .inputBox .button.butNormal {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, 1);
}
.dialogContent form .inputBox .button.butNormal:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, .8);
}
.dialogContent form .inputBox .button.butNormal:active {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, .9);
    transition: all .1s;
}
/* 删除按钮 */
.dialogContent form .inputBox .button.butDelete {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 0, 0, 1);
}
.dialogContent form .inputBox .button.butDelete:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 0, 0, .7);
}
.dialogContent form .inputBox .button.butDelete:active {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 0, 0, .9);
    transition: all .1s;
}
/* 失效按钮 */
.dialogContent form .inputBox .button.butDisable {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(185, 185, 185, 1);
}

/* 禁用按钮 */
.dialogContent form .inputBox .button.disable {
    color: aliceblue;
    background-color: rgba(180, 180, 180, 1);
}
.dialogContent form .inputBox .button.disable:hover {
    background-color: rgba(180, 180, 180, 0.8);
}
.dialogContent form .inputBox .button.disable:active {
    transition: .1s all;
    background-color: rgba(180, 180, 180, 1);
}

/* 上传资源列表 */
.dialogContent form .inputBox .draggableDataList {
    width: 100%;
    max-height: 300px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 5px;
    overflow-y: auto;
}
.dialogContent form .inputBox .draggableDataList .draggableData {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.dialogContent form .inputBox .draggableDataList .draggableData .progress {
    height: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    position: absolute;
    border-radius: 5px;
    z-index: 1;
    background-color: rgba(65, 185, 255, .5);
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding-right: 5px;
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(.5rem);
    -webkit-backdrop-filter: blur(.5rem);
    -moz-backdrop-filter: blur(.5rem);
    -ms-backdrop-filter: blur(.5rem);
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoMove {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    min-width: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoNum {
    flex-shrink: 0;
    padding: 0px 10px;
    min-width: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoIcon {
    flex-shrink: 0;
    min-width: 0px;
    display: flex;
    justify-content: center;
    
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoIcon img {
    width: 25px;
    height: 25px;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoName {
    flex: 1;
    padding: 0px 10px;
    min-width: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoType {
    flex-shrink: 0;
    max-width: 150px;
    padding: 0px 5px;
    min-width: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoSize {
    flex-shrink: 0;
    max-width: 100px;
    min-width: 0px;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoName span,
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoType span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .button {
    font-size: 14px;
    min-width: 0px;
    height: 25px;
    padding: 0px 5px;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .button .iconfont {
    font-size: 16px;
    margin-right: 2px;
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoType.fail {
    color: rgba(255, 0, 0, 1);
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoType.warning {
    color: rgb(255, 145, 0);
}
.dialogContent form .inputBox .draggableDataList .draggableData .draggableDataInfo .infoType.success {
    color: rgba(65, 185, 255, 1)
}

/* 对话框底部按钮 */
.dialogFooterButton {
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    color: rgba(65, 185, 255, 1);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
}
.dialogFooterButton:hover {
    background-color: rgba(200, 200, 200, .15);
}
.dialogFooterButton:active {
    transition: .1s all;
    background-color: rgba(220, 220, 220, .1);
}
.dialogFooterButton .line {
    width: 100%;
    border-right: 1px solid rgba(200, 200, 200, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 资源列表 */
/* .courseContentView .left .courseContentList .courseContentListContent .listContent .uploadResources {
    position: relative;
    margin: 5px 10px;

} */
</style>